<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/axios.min.js"></script>
    <script src="/js/query.js"></script>
    <script src="/user/js/user.js"></script>
    <style>
        .input{
            width: 150px;
            height: 20px;
            border-radius: 20px;
        }
        .Info{
            background-color: rgba(255,0,0,0.2);
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            visibility:hidden;
        }
        .div{
            margin-top: 50px;
            margin-left: 30px;
        }
        .table{
            width: 100%;
            height: auto;
            border: 1px solid blueviolet;
        }
        .box{
            margin-top: 30px;
        }
        .button12 {
            width:100px;
            height: 30px;
            text-align:center;
            line-height:100%;
            padding:0.3em;
            font:16px Arial,sans-serif bold;
            font-style:normal;
            text-decoration:none;
            margin:2px;
            vertical-align:text-bottom;
            zoom:1;
            outline:none;
            font-size-adjust:none;
            font-stretch:normal;
            border-radius:50px;
            box-shadow:0px 1px 2px rgba(0,0,0,0.2);
            text-shadow:0px 1px 1px rgba(0,0,0,0.3);
            color:#fefee9;
            border:0.2px solid #2299ff;
            background-repeat:repeat;
            background-size:auto;
            background-origin:padding-box;
            background-clip:padding-box;
            background-color:#3399ff;
            background: linear-gradient(to bottom, #eeeff9 0%,#3399ff 100%);
        }

        .button12:hover {
            background: #268DFF;
        }
    </style>
</head>
<body>
<div style="width: 100%;height:100%;" class="box" >
    <table class="table" cellspacing="0" >
        <thead><tr><th>用户名</th><th>密码</th><th>真实姓名</th><th>等级</th><th>操作用户</th></tr></thead>
        <tbody id="data" style="text-align: center"></tbody>
    </table>
</div>
<div>
    <input type="button" value="添加用户" onclick="addUser()" class="button12">
</div>
<div class="Info" id="info">
    <div style="width: 500px;height: 500px;border: 1px solid black ;background-color: white " class="info2">
        <div style="text-align: center"><h3>添加用户信息</h3></div>
        <div class="div">用户:<input type="text" id="userTxt"></div>
        <div class="div">真实姓名:<input type="text" id="nameTxt"></div>
        <div class="div">用户等级:  <select name="" id="grade" style="width: 150px ;height: 30px;margin-left: 20px">
            <option >班主任</option>
            <option >房间管理员</option>
            <option >系统管理</option>
            <option >超级管理员</option>
        </select></div>
        <input type="button" value="确定" onclick="affirm()"  class="button12">
        <input type="button" value="取消" onclick="cancel1()" class="button12">
    </div>
    <div class="Info" id="info2" >
        <div style="width: 500px;height: 500px;border: 1px solid black ;background-color: white " class="info2">
            <div style="text-align: center"><h3>修改用户等级</h3></div>
            <div class="div">用户:<span id="userSpan"></span></div>
            <div class="div" >真实姓名:<span id="nameSpan"></span></div>
            <div class="div">用户等级:
                <select name="" id="grade1" style="width: 150px ;height: 30px;margin-left: 20px">
                <option >班主任</option>
                <option >房间管理员</option>
                <option >系统管理员</option>
                <option >超级管理员</option>
            </select></div>
            <input type="button" value="修改" onclick="update1()" class="button12">
            <input type="button" value="取消" onclick="cancel()" class="button12">
        </div>
    </div>
</div>
</body>
</html>